<!--
 * @Author: zhangweinan
 * @Date: 2023-02-07 14:03:49
 * @LastEditors: zhangweinan
 * @LastEditTime: 2023-02-23 11:36:56
 * @Description: file content
 * @FilePath: \front-end-of-task-center\src\components\bpmnProcessDesigner\package\penal\config\timeConfig.vue
-->
<template>
  <div>
    <div class="titleConfig">时间设置</div>
    <el-radio-group v-model="timeRadio">
      <!-- <el-radio :label="1">绝对时间</el-radio> -->
      <el-radio :label="2">相对时间</el-radio>
    </el-radio-group>
    <div v-if="timeRadio === 1" class="childSelect">
      <span class="spanOne">截止时间：</span>
      <el-date-picker
        v-model="timeSelectVal"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        :style="{ width: '50%' }"
        placeholder="请选择日期选择"
        clearable
      ></el-date-picker>
    </div>
    <div v-else class="childSelect">
      <span class="spanOne">收到任务后的时间</span>
      <p>
        <span>
          <el-input-number
            v-model="deadDayCount"
            controls-position="right"
            :min="0"
            :step="1"
            @change="edit_deadDayCount"
          ></el-input-number>
          <span class="danweiSpan">天</span>
        </span>
        <!-- <span>
          <el-input-number
            v-model="num2"
            controls-position="right"
          ></el-input-number>
          <span class="danweiSpan">小时</span>
        </span> -->
      </p>
    </div>
  </div>
</template>
<script>
export default {
  name: "TimeConfig",
  props: { id: String },
  data() {
    return {
      deadDayCount: 0,
      num2: 1,
      timeSelectVal: null,
      timeRadio: 2,
      edit_timeoutflag: undefined,
    };
  },
  watch: {
    id: {
      immediate: true,
      handler(val) {
        val && val.length && this.$nextTick(() => this.resetFormList());
      },
    },
    deadDayCount: "setDeadlineCount",
    //timeRadio: "setTimeRadio",
  },
  methods: {
    //初始化配置
    resetFormList() {
      this.bpmnELement = window.bpmnInstances.bpmnElement;
      this.deadDayCount = this.bpmnELement.businessObject.deadDayCount
        ? Number(this.bpmnELement.businessObject.deadDayCount)
        : 0;
      // this.timeRadio = this.bpmnELement.businessObject.timeRadio
      //   ? Number(this.bpmnELement.businessObject.timeRadio)
      //   : 2;
    },
    setDeadlineCount() {
      window.bpmnInstances.modeling.updateProperties(this.bpmnELement, {
        deadDayCount: this.deadDayCount,
      });
    },
    setTimeRadio(val) {
      window.bpmnInstances.modeling.updateProperties(this.bpmnELement, {
        timeRadio: this.timeRadio,
      });
    },
    edit_deadDayCount(currentValue, oldValue) {
      if (this.edit_timeoutflag != null) {
        this.edit_timeoutflag = null;
        this.$nextTick(() => {
          this.deadDayCount = oldValue;
        });
        return;
      }
      this.edit_timeoutflag = "x";
      setTimeout(() => {
        this.edit_timeoutflag = null;
      }, 200);
    },
  },
};
</script>
<style lang="scss" scoped>
.titleConfig {
  font-size: 16px;
  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
  font-weight: 600;
  color: #333333;
  margin-bottom: 15px;
}
.childSelect {
  margin-top: 15px;
  .spanOne {
    font-size: 14px;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: 600;
    color: #333333;
  }
  box-sizing: border-box;
  padding: 0 20px;
}
::v-deep .el-input-number--medium {
  width: 150px;
  line-height: 34px;
}
.danweiSpan {
  display: inline-block;
  width: 50px;
  box-sizing: border-box;
  padding-left: 10px;
}
</style>
